<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@include file="../common.jsp" %>
</head>
<body>
<script type="text/javascript">
	$(function(){
		$("#sysUserList").datagrid({
			url : "sysUser/list",
			fitColumns : true,
			pagination : true,
			rownumbers : true,
			toolbar:"#toolbar"
		});
	})
	
	function roleFormatter(value,row,index){
		if(value == null || value.length == 0){
			return "-";
		}
		var str = "";
		$.each(value,function(i){
			str += this.name;
			if(i < value.length -1){
				str += ",";
			}
		});
		return str;
	}

	function setCondition(){
		var roleids = $("#roles").combobox("getValues");
		console.log(roleids);
		var postData = {
			"username" : $("#username").val()
		};

		$.each(roleids,function(i){
			postData["sysRoles["+i+"].id"] = this;
		});
		$("#sysUserList").datagrid("reload",postData);
	}

	function resetCondition(){
		$("#conditionForm").form("clear");
	}

	function batchDelete(){
		var rows = $("#sysUserList").datagrid("getSelections");
		if(rows.length == 0){
			$.messager.alert("提示","请选择要删除的数据","info");
			return;
		}
		//后续基本一致！
		$.messager.confirm("提示","确定要删除吗？",function(r){
			if(r){
				var postData = "";
				$.each(rows,function(i){
					postData += "ids="+this.id;
					if(i < rows.length -1 ){
						postData += "&";
					}
				});
				$.post("sysUser/batchDelete",postData,function(data){
					$("#sysUserList").datagrid("reload");
				});
			}
		});
		
	}

	function add() {
		var d = $("<div></div>").appendTo("body");
		d.dialog({
			title : "添加",
			iconCls : "icon-add",
			width:500,
			height:300,
			href : "sysUser/form",
			modal : true,
			onClose: function(){$(this).dialog("destroy");},
			buttons:[{
				text : "确定",
				iconCls:"icon-ok",
				handler : function(){
					$("#sysUserForm").form("submit",{
						url : "sysUser/add",
						success:function(data){
							d.dialog("close");
							$("#sysUserList").datagrid("reload");
						}
					});
				}
			},{
				text : "取消",
				iconCls:"icon-cancel",
				handler : function(){
					d.dialog("close");
				}
			}]
		});
	}
	function edit() {
		var row = $("#sysUserList").datagrid("getSelected");
		if(row == null){
			return;
		}
		
		var d = $("<div></div>").appendTo("body");
		d.dialog({
			title : "添加",
			iconCls : "icon-add",
			width:500,
			height:300,
			href : "sysUser/form",
			modal : true,
			onClose: function(){$(this).dialog("destroy");},
			onLoad : function(){
				//当异步加载的页面回来以后
				$.post("sysUser/view/"+row.id,function(data){
					$("#sysUserForm").form("load",data);
					//数据格式转换
					var ids = new Array();
					$.each(data.sysRoles,function(){
						ids.push(this.id);
					});
					$("#role_form").combobox("setValues",ids);
				});
			},
			buttons:[{
				text : "确定",
				iconCls:"icon-ok",
				handler : function(){
					$("#sysUserForm").form("submit",{
						url : "sysUser/edit",
						success:function(data){
							d.dialog("close");
							$("#sysUserList").datagrid("reload");
						}
					});
				}
			},{
				text : "取消",
				iconCls:"icon-cancel",
				handler : function(){
					d.dialog("close");
				}
			}]
		});
	}
</script>
	<div class="easyui-panel" title="设置查询条件"
		data-options="collapsible:true"
		 style="margin-bottom:15px; padding:10px;">
	<form action="" id="conditionForm">
		用户名：<input type="text" name="" id="username" />
		角色：
		<input id="roles" class="easyui-combobox" 
    				data-options="valueField:'id',textField:'name',url:'sysRole/all',panelHeight:'auto',multiple:true,width:300,editable:false">
    		<a id="btn" href="javascript:void(0)" onclick="setCondition()" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
    		<a id="btn" href="javascript:void(0)" onclick="resetCondition()" class="easyui-linkbutton" data-options="iconCls:'icon-redo'">重置条件</a>
		</form>
	</div>
	<table id="sysUserList">
		<thead>
			<tr>
				<th data-options="checkbox:true,field:'hello'"></th>
				<th data-options="field:'id',width:50,sortable:true">编号</th>
				<th data-options="field:'username',width:100,sortable:true">用户名</th>
				<th data-options="field:'salt',width:80,sortable:true">盐值</th>
				<th data-options="field:'sysRoles',width:80,formatter:roleFormatter">角色</th>
			</tr>
		</thead>
	</table>
	<div id="toolbar">
		<a id="btn" href="javascript:void(0)" onclick="add();" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
		<a id="btn" href="javascript:void(0)" onclick="edit();" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">编辑</a>
		<a id="btn" href="javascript:void(0)" onclick="batchDelete()" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>
		<a id="btn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo'">导出</a>
	</div>
</body>
</html>